<template>
  <base-breadcrumb>
    <a-card :bordered="false">
      <title-name
        v-if="isEdit == 0"
        title="新增设计成果资料"
      />
      <title-name
        v-if="isEdit == 1"
        title="编辑设计成果资料"
      />
      <a-form-model
        ref="form1"
        :model="form"
        :rules="rules"
      >
        <a-row :gutter="24">
          <a-col
            :md="16"
            :sm="16"
          >
            <a-form-model-item
              label="所属单位"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="projectId"
            >
              <org-tree-select
                v-model="form.projectId"
                is-need-auth
                is-auto-select-first
                check-strictly
                :is-query-projec-detail="false"
                @select="selectOrg"
              />
            </a-form-model-item>
          </a-col>
          <!--          <a-col-->
          <!--            :md="8"-->
          <!--            :sm="8"-->
          <!--          >-->
          <!--            <a-form-model-item-->
          <!--              label="分公司"-->
          <!--              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
          <!--              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
          <!--              prop="branchCompanyId"-->
          <!--            >-->
          <!--              <SelectSubCompany-->
          <!--                v-model="form.branchCompanyId"-->
          <!--                placeholder="请选择"-->
          <!--              />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <!--          <a-col-->
          <!--            :md="8"-->
          <!--            :sm="8"-->
          <!--          >-->
          <!--            <a-form-model-item-->
          <!--              label="项目名称"-->
          <!--              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
          <!--              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
          <!--              prop="projectId"-->
          <!--            >-->
          <!--              <SelectProject-->
          <!--                v-model="form.projectId"-->
          <!--                placeholder="请选择"-->
          <!--                :form="form"-->
          <!--                :is-clear="true"-->
          <!--                key-value="branchCompanyId"-->
          <!--              />-->
          <!--            </a-form-model-item>-->
          <!--          </a-col>-->
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="设计成果资源名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="name"
            >
              <BaseInput
                v-model="form.name"
                placeholder="输入设计成果资料名称"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="资料类型"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="typeDataId"
            >
              <a-select
                v-model="form.typeDataId"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="item in types"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="版本"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="exteriorVersion"
            >
              <a-select
                v-model="form.exteriorVersion"
                placeholder="请选择"
              >
                <a-select-option value="A">
                  A
                </a-select-option>
                <a-select-option value="B">
                  B
                </a-select-option>
                <a-select-option value="C">
                  C
                </a-select-option>
                <a-select-option value="D">
                  D
                </a-select-option>
                <a-select-option value="E">
                  E
                </a-select-option>
                <a-select-option value="F">
                  F
                </a-select-option>
                <a-select-option value="G">
                  G
                </a-select-option>
                <a-select-option value="H">
                  H
                </a-select-option>
                <a-select-option value="I">
                  I
                </a-select-option>
                <a-select-option value="J">
                  J
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="出图日期"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="pubDate"
            >
              <a-date-picker
                v-model="form.pubDate"
                format="YYYY-MM-DD"
                placeholder="请选择日期"
                @change="getPubDate"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="签收日期"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="receiptDate"
            >
              <a-date-picker
                v-model="form.receiptDate"
                format="YYYY-MM-DD"
                placeholder="请选择日期"
                @change="getReciptDate"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="创建人"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.creatorName"
                disabled
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="8"
            :sm="8"
          >
            <a-form-model-item
              label="创建时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput
                v-model="form.createTime"
                disabled
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col
            :md="24"
            :sm="24"
          >
            <a-form-model-item
              label="资料内容描述"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
              prop="contentDescription"
            >
              <BaseInput
                v-model="form.contentDescription"
                :max-length="300"
                type="textarea"
                placeholder="请输入"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <title-name title="设计成果资料 (提示：单个文件上传大小,需不超过500M) " />
      <a-upload
        name="file"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        @change="handleChanges"
      >
        <a-button
          type="primary"
          style="margin-bottom: 20px;"
        >
          <a-icon
            type="upload"
            style="font-size: 1.2rem"
          />上传
        </a-button>
      </a-upload>
      <a-button
        type=""
        style="margin-bottom: 20px;margin-left: 20px"
        @click="deleteExteriorFile()"
      >
        <a-icon style="font-size: 1.2rem" />删除
      </a-button>

      <a-table
        bordered
        :columns="columnAssment"
        :data-source="dataAssement"
        :row-selection="rowSelection"
      >
        <span
          slot="serial"
          slot-scope="text, record, index"
        >{{ index + 1 }}</span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            :href="'/api/ycloud-file-center/oper/download?access_token='+token+'&fileId='+record.fileId"
            target="_parent"
          >导出</a>
          <a-divider
            type="vertical"
          />
          <a
            href="javascript:"
            @click="$filePreview(record)"
          >预览</a>
        </span>
      </a-table>
    </a-card>

    <div class="page-btn-right-top">
      <a-button
        type="primary"
        :loading="loading"
        style="margin-right: 20px"
        @click="submit"
      >
        提交
      </a-button>
      <a-button
        type="primary"
        @click="goBack"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
  import Vue from 'vue'
  import { STable, Ellipsis } from '@/components'
  import { addExterior, editExterior,getExteriorOne,deleteExteriorFile } from '@/api/design/designRegister'
  import { getTypes } from '@/api/commons'
  import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
  import SelectProject from '@/components/SelectProjects/SelectProject' // 项目
  import { uploadFile,deleteUploadFile } from '@/api'

  import ARow from 'ant-design-vue/es/grid/Row'

  const columnAssment = [
    {
      title: '序号',
      dataIndex: 'serial',
      width: '5%',
      scopedSlots: { customRender: 'serial' },
    },
    {
      title: '附件名称',
      dataIndex: 'fileName',
      width: '35%',
    },
    {
      title: '附件格式',
      dataIndex: 'suffixName',
      width: '35%',
    },
    {
      title: '操作',
      key: 'action',
      width: '20%',
      scopedSlots: { customRender: 'action' },
    },
  ];

  export default {
    name:'a'+Date.now(),
    components: {
      ARow,
      SelectSubCompany,
      SelectProject,
    },
    data() {
      return {
        loading:false,
        columnAssment,
        // 设计成果资料附件上传
        dataAssement:[],
        uploadFile:{},
        deleteObj:{},
        token:'',
        fileFileds:null,
        fileIds:[],

        listUrl:'',
        businessCode:'PM21',
        businessId:'',

        selectedRowKeys: [],
        selectedRows: [],
        selectId:[],

        data:[],
        form:{
          creatorName:JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
          createTime:this.getNowDate()
        },

        //
        rules: {
          branchCompanyId:[{required: true, message: '请选择分公司', trigger: 'change'}],
          projectId:[{required: true, message: '请选择项目', trigger: 'change'}],
          name:[{required: true, message: '请输入设计成果资料名称', trigger: 'blur'}],
          typeDataId:[{required: true, message: '请选择资料类型', trigger: 'change'}],
          exteriorVersion:[{required: true, message: '请选择版本', trigger: 'change'}],
          pubDate:[{required: true, message: '请选择出图日期', trigger: 'change'}],
          receiptDate:[{required: true, message: '请选择签收日期', trigger: 'change'}],
          contentDescription:[{required: true, message: '请输入资料描述', trigger: 'blur'}],
        },

        types:[],   // 外部资料类型
        totalDels:{},
        queryParams:{
          id:'',
        },
        dels:{},
        id:'',
        isEdit:'',  // 是否是编辑
      }
    },

    created() {
      this.id = this.$route.query.id
      this.businessId = this.$route.query.id
      this.queryParams.id = this.$route.query.id
      this.isEdit = this.$route.query.isEdit

      if(this.isEdit == 1){
        this.getExteriorOne()
      }
      this.getTypes()

      this.token = Vue.getAcloudProvider().getAccessToken()

    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          selectedRows: this.selectedRows,   // 当前行所有数据
          onChange: this.onSelectChange
        }
      },
    },
    methods: {
      selectOrg(val) {
        this.form.branchCompanyId = val[val.length - 2].orgId
      },
      getReciptDate(val){
        this.form.receiptDate = val.format("YYYY-MM-DD")
      },
     getPubDate(val){
      this.form.pubDate = val.format("YYYY-MM-DD")
    },
      deleteExteriorFile(){

        let that = this;
        if(that.selectedRowKeys.length == 0){
          that.$message.error("请先选中需要删除的附件！")
          return;
        }
        if(that.id){
          that.$confirm({
            title: '删除',
            content: '确定删除附件吗？',
            onOk() {
              let data = that.dataAssement
              let selectDatas = that.fileIds
              that.dataAssement = data.filter((item) => {
                return !selectDatas.includes(item.commonId)
              })

              let commonIds = []
              that.dataAssement.forEach && that.dataAssement.forEach((item)=>{
                commonIds.push(item.commonId)
              })
              that.form.uploadFileList = commonIds
              that.selectedRowKeys = []
              that.$message.success('删除成功')
            },
            onCancel() {},
          });

        }else{
          that.$confirm({
            title: '删除',
            content: '确定删除附件吗66？',
            onOk() {
              deleteUploadFile({fileIds:that.fileFileds}).then(res=>{
                if(res.code == '0' || res.data.code == '0'){
                  let data = that.dataAssement
                  let selectDatas = that.fileIds
                  that.dataAssement =  data.filter(item => { return !selectDatas.includes(item.commonId); });
                  that.selectedRowKeys = []
                  that.$message.success('删除成功')
                }
              })
            },
            onCancel() {},
          });

        }

      },

      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
        let fileFileds = []
        let fileIds = []
        selectedRows.forEach(function(obj,i) {
          fileFileds.push(obj.fileId)
          fileIds.push(obj.commonId)
        })
        this.fileFileds = fileFileds.join(',')   // 删除公共附件
        this.fileIds = fileIds                   // 有业务id 删除附件

      },
      // 上传

      beforeUpload(info){
        this.uploadFile = info
        return false
      },

      handleChanges() {
        const data = new FormData()
        data.append("file",this.uploadFile)
        data.append("businessCode",this.businessCode)
        let arr = []
        uploadFile( data ).then(res => {
          if(res.code === 200 ){

            arr.push(res.data)
            if (this.dataAssement == null) {
              this.dataAssement = arr
            } else {
              this.dataAssement = this.dataAssement.concat(arr)
            }

            let commonIds = []
            this.dataAssement.forEach && this.dataAssement.forEach((item)=>{
              commonIds.push(item.commonId)
            })
            this.form.uploadFileList = commonIds
          }
        })
      },

      goBack(){
        this.$multiTab.close(this.$route.fullpath)
      },


      submit(){   // 提交
        this.$refs.form1.validate((err, values) => {
          if(err){
          if(this.form.id){
            this.loading = true
            editExterior(this.form).then(res=>{
              this.loading = false
              if(res.code == 200){
                this.$message.success("编辑成功")
                this.$router.push({path:'/designRegister/list'})
              }else{
                this.$message.error("编辑失败")
              }
            })
          }else{
            this.loading = true
            addExterior(this.form).then(res=>{
              this.loading = false
              if(res.code == 200){
                this.$message.success("新增成功")
                this.form = {}
                this.$router.push({path:'/designRegister/list'})
              }else{
                this.$message.error("新增失败")
              }
            })
          }
          }
        })
      },

      getTypes(){
        getTypes({type:26}).then(res=>{
          this.types = res.data
        })
      },

      getExteriorOne(){
        getExteriorOne({id:this.id}).then(res=>{
          this.form = { ...res.data }
          this.$nextTick(() => {

          })
          this.dataAssement = res.data.fileList
        })
      },
    }
  }
</script>


